

import { useCallback, useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Avatar } from 'antd';

import {
    group_item,
    group_item_nohover,
    group_item_content,
    group_item_group_avator,
    group_item_group_name,
    group_item_user,
    group_item_user_message,
    group_item_user_name,
    group_item_tip,
    group_item_message_time,
    group_item_message_tip,
    text_in,
    text_trans,
    current,
    group_item_top,
    group_item_bottom,
    years
} from './index.module.css'
import { imgUrlDev, replaceHighLigh } from '../../assets/js/tools'
import { changeCurrentRoom } from '../../store/actions'
import { getGroupLastCheckTime } from '../../assets/js/api';



function GroupListItem(props) {

    const { user, info, clearCheck } = props; // info为群组信息,clearCheck为函数,当进入时调用,清空未读信息
    const { currentRoom, changeCurrentRoom } = props;
    const visibleTip = props.visibleTip ?? true;    // props可选,是否显示tip功能
    const hoverBackColor = props.hoverBackColor ?? true;    // props可选,hover时是否显示背景颜色
    const highLight = props.highLight ?? false;    // props可选,关键字高亮显示
    const { group_id, group_name, group_avator, no_check } = info;
    const { name, message_content, send_time } = info;
    
    const [newMessage, setNewMessage] = useState(no_check)
    const [messageTime, setMessageTime] = useState('');
    const [isYear, setIsYear] = useState(false);

    const getTime = useCallback(() => {
        let time = formatDate(send_time);
        setMessageTime(time);
    }, [send_time]);


    useEffect(() => {
        // 当info改变则代表群组的最后一条消息改变,则代表有新消息,故设置新信息数
        setNewMessage(no_check)
        if (currentRoom === group_id) {
            // 若当前选中群组和新信息群组相同则不显示新信息提示
            setNewMessage(0);
            clearCheck();
        }
    }, [group_id, no_check, currentRoom, clearCheck]);


    useEffect(() => {
        getTime();
    }, [info]);


    function formatDate(date) {
        if (date === '') return '';// 代表没有消息
        // 格式化时间显示
        const sendDate = new Date(date);
        const nowDate = new Date();
        if (sendDate.getFullYear() !== nowDate.getFullYear()) {
            setIsYear(true)
            return `${sendDate.getFullYear()}-${sendDate.getMonth() + 1}-${sendDate.getDate()}`;
        }
        const sendDay = sendDate.getDate();
        const nowDay = nowDate.getDate();
        if (sendDay !== nowDay) {
            if (nowDay - sendDay === 1) {
                return '昨天';
            }
            return `${sendDate.getMonth() + 1}-${sendDay}`
        }
        return `${sendDate.getHours() < 10 ? `0${sendDate.getHours()}` : sendDate.getHours()}:${sendDate.getMinutes() < 10 ? `0${sendDate.getMinutes()}` : sendDate.getMinutes()}`
    }
    function showGroupMessage() {
        // 点击使room右侧显示对应群聊内容
        if (currentRoom !== -1) {   
            // 退出房间时,将用户最后查看群组时间更新
            getGroupLastCheckTime({user_id: user.id, group_id: currentRoom,some:1})
        }
        changeCurrentRoom(group_id);
        setNewMessage(0);
        clearCheck();
    }


    return (
        // 是否选中,group_item选中添加class current.初始进入不选中任何房间,之后使用redux控制当前选中房间
        <div className={`${hoverBackColor ? group_item : group_item_nohover} ${currentRoom === group_id ? current : ''}`} onClick={showGroupMessage}>
            <Avatar className={group_item_group_avator} src={imgUrlDev(group_avator)} size={64} />
            <div className={group_item_content} title={`${name}:${message_content}`}>
                <div className={group_item_top}>
                    <span className={`${group_item_group_name} ${isYear ? years : ''} ${highLight ? '' : text_trans}`} dangerouslySetInnerHTML={{__html: replaceHighLigh((group_id === 0 ? '系统消息' : group_name), highLight)}}></span>
                    {
                        visibleTip ? 
                            <span className={group_item_message_time}>{messageTime}</span>
                            : ''
                    }
                </div>
                <div className={group_item_bottom}>
                    <div className={group_item_user}>
                        <span className={group_item_user_name} dangerouslySetInnerHTML={{__html: replaceHighLigh(name, highLight)}}></span>
                        {
                            group_id === 0 ? '' : ': '
                        }
                        <span className={group_item_user_message} dangerouslySetInnerHTML={{__html: replaceHighLigh(message_content, highLight)}}></span>
                        {
                            visibleTip ? 
                                <span className={`${group_item_message_tip} ${newMessage > 0 ? text_in : ''}`}>{newMessage > 0 ? newMessage : ''}</span>
                                : ''
                        }
                    </div>
                </div>
            </div>
            {/* {
                visibleTip ? 
                    <div className={group_item_tip}>
                        <span className={group_item_message_time}>{formatDate(send_time)}</span>
                        <span className={`${group_item_message_tip} ${newMessage > 0 ? text_in : ''}`}>{newMessage > 0 ? newMessage : ''}</span>
                    </div> : 
                    ''
            } */}
        </div>
    )
}

function mapStateToProps(state) {
    return {
        user: state.user,
        currentRoom: state.currentRoom,
    }
}

export default connect(
    mapStateToProps,
    {
        changeCurrentRoom
    }
)(GroupListItem);


